<template>
  <view>
    <nav-bar title="支付"></nav-bar>
    <view class="pay-container">
      <view class="recharge-list">
        <view
          class="recharge-item recharge-item-1"
          v-if="this.currentSelect == 0"
        >
          <view class="recharge-item-icon">扮</view>
          <view class="recharge-item-count">20本</view>
          <view class="recharge-item-price-box">
            <view class="recharge-item-price">100元</view>
            <view class="recharge-item-price-explain">相当于每本5元</view>
          </view>
        </view>
        <view
          class="recharge-item recharge-item-2"
          v-if="this.currentSelect == 1"
        >
          <view class="recharge-item-icon">扮</view>
          <view class="recharge-item-count">10本</view>
          <view class="recharge-item-price-box">
            <view class="recharge-item-price">60元</view>
            <view class="recharge-item-price-explain">相当于每本6元</view>
          </view>
        </view>
        <view
          class="recharge-item recharge-item-3"
          v-if="this.currentSelect == 2"
        >
          <view class="recharge-item-icon">扮</view>
          <view class="recharge-item-count">5本</view>
          <view class="recharge-item-price-box">
            <view class="recharge-item-price">35元</view>
            <view class="recharge-item-price-explain">相当于每本7元</view>
          </view>
        </view>
      </view>
      <view class="pay-list">
        <view class="pay-item">
          <view class="pay-item-icon">icon</view>
          <view class="pay-item-box">
            <view class="pay-item-title">微信支付</view>
            <view class="pay-item-arrow-right"> > </view>
          </view>
        </view>
        <view class="pay-item">
          <view class="pay-item-icon">icon</view>
          <view class="pay-item-box">
            <view class="pay-item-title">支付宝支付</view>
            <view class="pay-item-arrow-right"> > </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
  components: {
    NavBar,
  },
  data() {
    return {
      currentSelect: 0,
    };
  },
  onLoad(e) {
    if (e.currentSelect) {
      this.currentSelect = e.currentSelect;
    }
  },
};
</script>

<style scoped>
page {
  background-color: #f8f8f8;
}
.pay-container {
  box-sizing: border-box;
  width: 100%;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recharge-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recharge-item {
  width: 100%;
  background-color: #ff6600;
  display: flex;
  border-radius: 20rpx;
  border: 4rpx solid #fff;
  box-shadow: 0 0 20rpx #999999;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}
.recharge-item-1 {
  background-color: #ff6600;
}
.recharge-item-2 {
  background-color: #92d14f;
}
.recharge-item-3 {
  background-color: #ded9c3;
}
.recharge-item-icon {
  font-size: 48rpx;
}
.recharge-item-count {
  font-size: 48rpx;
}
.recharge-item-price-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.recharge-item-price {
  color: #fff;
  font-size: 48rpx;
}
.recharge-item-price-explain {
  font-size: 24rpx;
}
.pay-list {
  width: 100%;
  margin-top: 80rpx;
}
.pay-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 36rpx;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #eee;
}
.pay-item-box{
    width: 80%;
    display: flex;
    justify-content: space-between;
}
</style>
